@color: hsl(199, 72%, 48%);

#root{
  // width: ceil(1999 / 2) + 0px;
  width: floor(2005 / 2) + 0px;
  min-height: 300px;
  border: solid 1px #ddd; 
  background: url(http://api.xiaohigh.com/image/random);
  margin: 0 auto;
  .row{
    // box 元素样式
    .box{
      width: percentage(1/3);
      height: 100px;
      background: #cef;
    }

    //box2 的元素样式
    .box2:nth-child(1){
      width: 100%;
      height: 50px;
      background: @color;
    }

    .box2:nth-child(2){
      width: 100%;
      height: 50px;
      background: darken(@color, 10%);
    }

    .box2:nth-child(3){
      width: 100%;
      height: 50px;
      background: darken(@color, 20%);
    }

    .box2:nth-child(4){
      width: 100%;
      height: 50px;
      background: darken(@color, 30%);
    }

    .box2:nth-child(5){
      width: 100%;
      height: 50px;
      background: darken(@color, 40%);
    }
    
    .box3:nth-child(1){
      width: 100%;
      height: 50px;
      background: @color;
    }

    .box3:nth-child(2){
      width: 100%;
      height: 50px;
      background: fadeout(@color, 10%);
    }

    .box3:nth-child(3){
      width: 100%;
      height: 50px;
      background: fadeout(@color, 20%);
    }

    .box3:nth-child(4){
      width: 100%;
      height: 50px;
      background: fadeout(@color, 50%);
    }

  }
}